<template>
  <section :style="commonStyle">
    <!-- 没有图标时 -->
    <div v-if="data.icon == ''"
         class="image addIcon default"
         :style="commonStyle">
      <a-icon type="plus" />
    </div>
    <!-- 有图标时 本地图片-->
    <div v-if="data && data.iconType=='0'"
         :style="Object.assign({'background-color':data.iconColor},commonStyle)"
         class="image addIcon showIcon">
      <span class="iconfont"
            :class="data.icon"
            :style="{'font-size':`${imgSize/2}px`}">
      </span>
    </div>
    <!-- 有图标时 上传图片-->
    <div v-if="data && data.iconType=='1'"
         class="image addIcon showIcon">
      <img :src="storage.downloadURL+''+data.icon"
           :style="commonStyle" />
    </div>
  </section>
</template>

<script>
// 后台调用
import { storage } from '@zh/common-utils/http'
import PropTypes from '@zh/common-utils/prop-types'

export default {
  name: 'ZIconShow',
  extends: null,
  mixins: [],
  components: {},
  props: {
    // 修改数据
    iconData: PropTypes.object.def({}),
    // 图片大小
    imgSize: PropTypes.number.def(50)
  },
  data () {
    return {
      storage,
      // 图片信息
      data: {}

    }
  },
  computed: {
    // 共有样式计算 根据size计算
    commonStyle () {
      return {
        width: `${this.imgSize}px`,
        height: `${this.imgSize}px`,
        'line-height': `${this.imgSize + 5}px`
      }
    }
  },
  watch: {
    iconData: {
      deep: true,
      immediate: true,
      handler (v) {
        this.data = v
      }
    }
  },
  methods: {
  }
}
</script>

<style lang="less" scoped>
.default {
  width: 50px;
  height: 50px;
  line-height: 50px;
}
.image {
  border-radius: 10%;
}

.addIcon {
  text-align: center;
  background-color: #fafafa;
  border: 1px dashed #ccc;
}
.addIcon i {
  color: #c0c4cc;
}

.showIcon {
  border: none;
  .iconfont {
    color: #f5f7fa !important;
  }
}
.showIcon i {
  color: #f5f7fa !important;
}
.upload-text {
  line-height: 1;
  margin-top: 5px;
}
</style>
